<template>
    <div class="talent-container">
        <!-- 操作栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <el-button type="primary" plain @click="initiate">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    发起面试
                </el-button>
            </div>

            <div class="toolbar-right">
                <el-input class="search-input" v-model="searchKeyword" placeholder="搜索數據" @keyup.enter="search"
                    clearable>
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>

                <el-button @click="dialog = true">
                    筛选<el-icon class="el-icon--right">
                        <Filter />
                    </el-icon>
                </el-button>

                <el-button @click="sorting">
                    {{ sortTheNumbers === 1 ? '升序' : '降序' }}
                    <el-icon>
                        <Sort />
                    </el-icon>
                </el-button>

                <el-button @click="reset">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="content-wrapper">
            <div class="table-container">
                <el-table :data="page.records" class="talent-table" scrollbar-always-on @cell-dblclick="handleClick">
                    <el-table-column fixed="left" prop="CandidateID" label="简历编号" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.CandidateID }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="left" prop="RequirementID" label="需求编号" width="150" align="center" />
                    <el-table-column fixed="left" prop="IntendedPosition" label="意向岗位" width="150" align="center">
                        <template #default="scope">
                            <el-tag type="primary">{{ scope.row.IntendedPosition }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="JobNature" label="应聘类型" width="150" align="center" />
                    <el-table-column prop="CandidateName" label="姓名" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.CandidateName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Gender" label="性别" width="150" align="center">
                        <template #default="scope">
                            <a-button disabled shape="round" v-if="scope.row.Gender === '女'"
                                :style="{ backgroundColor: '#FF69B4', borderColor: '#FF69B4', color: '#FFFFFF' }">
                                {{ scope.row.Gender }}
                            </a-button>
                            <a-button disabled shape="round" v-else
                                :style="{ backgroundColor: '#5AAAFB', borderColor: '#5AAAFB', color: '#FFFFFF' }">
                                {{ scope.row.Gender }}
                            </a-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="EthnicGroup" label="民族" width="150" align="center" />
                    <el-table-column prop="Origin" label="籍贯" width="150" align="center" />
                    <el-table-column prop="HouseholdRegistration" label="户口" width="150" align="center">
                        <template #default="scope">
                            <a-button disabled shape="round" v-if="scope.row.HouseholdRegistration === '城镇'"
                                :style="{ backgroundColor: '#5AAAFB', borderColor: '#5AAAFB', color: '#FFFFFF' }">
                                {{ scope.row.HouseholdRegistration }}
                            </a-button>
                            <a-button disabled shape="round" v-else
                                :style="{ backgroundColor: '#F9CC44', borderColor: '#F9CC44', color: '#FFFFFF' }">
                                {{ scope.row.HouseholdRegistration }}
                            </a-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="PoliticalAppearance" label="政治面貌" width="150" align="center">
                        <template #default="scope">
                            <a-button disabled shape="round" v-if="scope.row.PoliticalAppearance === '群众'"
                                :style="{ backgroundColor: '#5AAAFB', borderColor: '#5AAAFB', color: '#FFFFFF' }">
                                {{ scope.row.PoliticalAppearance }}
                            </a-button>
                            <a-button disabled shape="round" v-else-if="scope.row.PoliticalAppearance === '党员'"
                                :style="{ backgroundColor: '#CB2E34', borderColor: '#CB2E34', color: '#FFFFFF' }">
                                {{ scope.row.PoliticalAppearance }}
                            </a-button>
                            <a-button disabled shape="round" v-else
                                :style="{ backgroundColor: '#F9CC44', borderColor: '#F9CC44', color: '#FFFFFF' }">
                                {{ scope.row.PoliticalAppearance }}
                            </a-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CellPhone" label="手机号码" width="150" align="center" />
                    <el-table-column prop="Mailbox" label="邮箱" width="150" align="center" />
                    <el-table-column prop="DateOfBirth" label="出生日期" sortable width="150" align="center" />
                    <el-table-column prop="Age" label="年龄" width="150" align="center" />
                    <el-table-column prop="Degree" label="学历" width="150" align="center" />
                    <el-table-column prop="School" label="学校" width="150" align="center" />
                    <el-table-column prop="Specialized" label="专业" width="150" align="center" />
                    <el-table-column prop="GraduationTime" label="毕业时间" sortable width="150" align="center" />
                    <el-table-column prop="MarriageAndChildbearing" label="婚育情况" width="150" align="center" />
                    <el-table-column prop="LastWork" label="工作经历" width="150" align="center" />
                    <el-table-column prop="RecruiterID" label="招聘负责人" width="150" align="center" />
                    <el-table-column prop="ResumeStatus" label="简历状态" width="150" align="center">
                        <template #default="scope">
                            <a-button disabled shape="round" v-if="scope.row.ResumeStatus === '待入职'"
                                :style="{ backgroundColor: '#8E44AD', borderColor: '#8E44AD', color: '#FFFFFF' }">
                                {{ scope.row.ResumeStatus }}
                            </a-button>
                            <a-button disabled shape="round" v-else-if="scope.row.ResumeStatus === '待面试'"
                                :style="{ backgroundColor: '#FF69B4', borderColor: '#FF69B4', color: '#FFFFFF' }">
                                {{ scope.row.ResumeStatus }}
                            </a-button>
                            <a-button disabled shape="round" v-else-if="scope.row.ResumeStatus === '已入职'"
                                :style="{ backgroundColor: '#00FF00', borderColor: '#00FF00', color: '#FFFFFF' }">
                                {{ scope.row.ResumeStatus }}
                            </a-button>
                            <a-button disabled shape="round" v-else
                                :style="{ backgroundColor: '#CCCCCC', borderColor: '#CCCCCC', color: '#000000' }">
                                {{ scope.row.ResumeStatus }}
                            </a-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Creator" label="提交人" width="150" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.Creator }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="WarehousingDate" label="入库时间" sortable width="150" align="center" />
                </el-table>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="page.current" v-model:page-size="page.size"
                :page-sizes="[10, 20, 30, 40]" :disabled="disabled" layout="total, sizes, prev, pager, next, jumper"
                :total="page.total" background @current-change="handleCurrentChange" @size-change="handleSizeChange">
            </el-pagination>
        </div>
    </div>

    <!-- 详情页面 -->
    <el-dialog title="JL2025-07-100001" v-model="isVisible" fullscreen lock-scroll="true" destroy-on-close>
        <hr />
        <DetailsOfTheTalent :data="talentId"></DetailsOfTheTalent>
    </el-dialog>

    <!--筛选  -->
    <el-drawer v-model="dialog" title="筛选" direction="rtl" class="demo-drawer">
        <div class="demo-drawer__content">
            <el-form :model="form" style="height: 600px;">
                <el-select v-model="Screening" placeholder="筛选" style="width: 360px" placement="bottom">
                    <template #label="{ label, value }">
                        <span style="font-weight: bold">{{ label }}</span>
                    </template>
                    <el-option v-for="item in FilterData" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" :loading="loading" @click="onClick">
                    {{ loading ? '提交中 ...' : '提交' }}
                </el-button>
            </div>
        </div>
    </el-drawer>
    <!-- 发起面试页面 -->
    <el-dialog title="发起面试" v-model="interviewDisplay" fullscreen lock-scroll="true" destroy-on-close>
        <hr />
        <talentInitiatesInterviews></talentInitiatesInterviews>
    </el-dialog>
</template>

<script lang="ts" setup>
import request from '@/api/request'
import { ref } from 'vue'
import DetailsOfTheTalent from './DetailsOfTheTalent.vue'
import talentInitiatesInterviews from './talentInitiatesInterviews.vue'
import { Plus, Search, Filter, Sort, Refresh } from '@element-plus/icons-vue'

const interviewDisplay = ref(false)// 显示面试页面
const isVisible = ref(false) // 详情显示
const loading = ref(false) //抽屉加载
const dialog = ref(false); //抽屉

const form = ref();
const Screening = ref('待面试') //筛选
const FilterData = ref([ //筛选数据
    { value: '待面试', label: '待面试' },
    { value: '已入职', label: '已入职' },
    { value: '进行中', label: '待入职' },
])

const initiate = () => {//发起面试
    interviewDisplay.value = true
}

// 添加搜索关键词响应式变量，用于存储用户输入的搜索内容
const searchKeyword = ref('')

// columns : 表头
const columns = ref([
    { id: 'JobNature', label: '应聘类型', width: '200' },
    { id: 'CandidateName', label: '姓名', width: '200' },
    { id: 'Gender', label: '性别', width: '120' },
    { id: 'EthnicGroup', label: '民族·', width: '200' },
    { id: 'Origin', label: '籍贯', width: '200' },
    { id: 'HouseholdRegistration', label: '户口', width: '200' },
    { id: 'PoliticalAppearance', label: '政治面貌', width: '200' },
    { id: 'CellPhone', label: '手机号', width: '200' },
    { id: 'Mailbox', label: '邮箱', width: '200' },
    { id: 'DateOfBirth', label: '出生年月', width: '200' },
    { id: 'Age', label: '年龄', width: '200' },
    { id: 'Degree', label: '学历', width: '200' },
    { id: 'School', label: '学校', width: '200' },
    { id: 'Specialized', label: '专业', width: '200' },
    { id: 'GraduationTime', label: '毕业时间', width: '200' },
    { id: 'MarriageAndChildbearing', label: '婚育情况', width: '200' },
    { id: 'LastWork', label: '工作经历', width: '200' },
    { id: 'RecruiterID', label: '招聘负责人', width: '200' },
    { id: 'ResumeStatus', label: '简历状态', width: '200' },
    { id: 'Creator', label: '提交人', width: '200' },
    { id: 'warehousingDate', label: '入库时间', width: '200' },
])

// 数据
const data = ref([])

const page = ref({
    total: 0,
    current: 1,
    size: 10,
    records: []
})

const disabled = ref(false)

const talentInformationMethod = () => {
    request({
        url: 'talentpool/queryStatus',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            search: searchKeyword.value,
            status: Screening.value,
            keyword: searchKeyword.value
        }
    }).then(res => {
        console.log("获取人才", res.data);
        // 映射数据字段以匹配表格列
        const mappedRecords = res.data.records.map(record => {
            return {
                // 基本信息映射
                CandidateID: record.candidateresume?.candidateid || record.talentresumeid,
                RequirementID: record.candidateresume?.resumeRequirements,
                IntendedPosition: record.candidateresume?.intendedPosition || record.intendedPosition,
                JobNature: record.candidateresume?.typeofjobapplication || record.typeofjobapplication,
                CandidateName: record.candidateresume?.candidatename || record.candidatename,
                Gender: record.candidateresume?.gender === 1 ? '女' : '男',
                EthnicGroup: record.candidateresume?.ethnicGroup || record.ethnicGroup,
                Origin: record.candidateresume?.origin || record.origin,
                HouseholdRegistration: record.candidateresume?.householdRegistration || record.householdRegistration,
                PoliticalAppearance: record.candidateresume?.politicalAppearance || record.politicalAppearance,
                CellPhone: record.candidateresume?.cellPhone || record.cellPhone,
                Mailbox: record.candidateresume?.mailbox || record.mailbox,
                DateOfBirth: record.candidateresume?.dateOfBirth || record.dateOfBirth,
                Age: record.candidateresume?.age || record.age,
                Degree: record.candidateresume?.degree === 1 ? '本科' : (record.candidateresume?.degree === 2 ? '大专' : (record.candidateresume?.degree === 3 ? '硕士' : '其他')),
                School: record.candidateresume?.school || record.school,
                Specialized: record.candidateresume?.specialized || record.specialized,
                GraduationTime: record.candidateresume?.graduationTime || record.graduationTime,
                MarriageAndChildbearing: record.candidateresume?.marriageAndChildbearing || record.marriageAndChildbearing,
                LastWork: record.candidateresume?.lastWork || record.lastWork,
                RecruiterID: record.recruitmentrequirement?.screenpeople || record.candidateresume.screenpeople,
                ResumeStatus: record.candidateresume?.talentStatus || record.candidateresume.resumeStatus,
                Creator: record.creator,
                WarehousingDate: record.warehousingDate,
                // 原始数据保留以供详情使用
                rawData: record
            }
        });

        page.value.records = mappedRecords;
        page.value.total = res.data.total;
        console.log("分页数据", page.value);
    })
}

const handleCurrentChange = (val) => {
    page.value.current = val
    talentInformationMethod()
}

const handleSizeChange = (val) => {
    page.value.size = val
    page.value.current = 1
    talentInformationMethod()
}

talentInformationMethod()

const search = () => { // 搜索
    talentInformationMethod()
}

const sortTheNumbers = ref(1)//排序默认1升序 
const sorting = () => {
    sortTheNumbers.value = sortTheNumbers.value === 1 ? 2 : 1
    const url =
        sortTheNumbers.value === 1 ? '/talentpool/ascendingOrder' : '/talentpool/descendingOrder'
    request({
        url,
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            search: searchKeyword.value,
            status: Screening.value,
            keyword: searchKeyword.value
        }
    }).then(res => {
        console.log("获取人才", res.data);
        // 映射数据字段以匹配表格列
        const mappedRecords = res.data.records.map(record => {
            return {
                // 基本信息映射
                CandidateID: record.candidateresume?.candidateid || record.talentresumeid,
                RequirementID: record.candidateresume?.resumeRequirements,
                IntendedPosition: record.candidateresume?.intendedPosition || record.intendedPosition,
                JobNature: record.candidateresume?.typeofjobapplication || record.typeofjobapplication,
                CandidateName: record.candidateresume?.candidatename || record.candidatename,
                Gender: record.candidateresume?.gender === 1 ? '女' : '男',
                EthnicGroup: record.candidateresume?.ethnicGroup || record.ethnicGroup,
                Origin: record.candidateresume?.origin || record.origin,
                HouseholdRegistration: record.candidateresume?.householdRegistration || record.householdRegistration,
                PoliticalAppearance: record.candidateresume?.politicalAppearance || record.politicalAppearance,
                CellPhone: record.candidateresume?.cellPhone || record.cellPhone,
                Mailbox: record.candidateresume?.mailbox || record.mailbox,
                DateOfBirth: record.candidateresume?.dateOfBirth || record.dateOfBirth,
                Age: record.candidateresume?.age || record.age,
                Degree: record.candidateresume?.degree === 1 ? '本科' : (record.candidateresume?.degree === 2 ? '大专' : (record.candidateresume?.degree === 3 ? '硕士' : '其他')),
                School: record.candidateresume?.school || record.school,
                Specialized: record.candidateresume?.specialized || record.specialized,
                GraduationTime: record.candidateresume?.graduationTime || record.graduationTime,
                MarriageAndChildbearing: record.candidateresume?.marriageAndChildbearing || record.marriageAndChildbearing,
                LastWork: record.candidateresume?.lastWork || record.lastWork,
                RecruiterID: record.recruitmentrequirement?.screenpeople || record.candidateresume.screenpeople,
                ResumeStatus: record.candidateresume?.talentStatus || record.candidateresume.resumeStatus,
                Creator: record.creator,
                WarehousingDate: record.warehousingDate,
                // 原始数据保留以供详情使用
                rawData: record
            }
        });

        page.value.records = mappedRecords;
        page.value.total = res.data.total;
        console.log("分页数据", page.value);
    })

}

const onClick = () => {//抽屉提交
    loading.value = true
    request({
        url: 'talentpool/queryStatus',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            search: searchKeyword.value,
            status: Screening.value,
            keyword: searchKeyword.value
        }
    }).then(res => {
        console.log("获取人才", res.data);
        // 映射数据字段以匹配表格列
        const mappedRecords = res.data.records.map(record => {
            return {
                // 基本信息映射
                CandidateID: record.candidateresume?.candidateid || record.talentresumeid,
                RequirementID: record.candidateresume?.resumeRequirements,
                IntendedPosition: record.candidateresume?.intendedPosition || record.intendedPosition,
                JobNature: record.candidateresume?.typeofjobapplication || record.typeofjobapplication,
                CandidateName: record.candidateresume?.candidatename || record.candidatename,
                Gender: record.candidateresume?.gender === 1 ? '女' : '男',
                EthnicGroup: record.candidateresume?.ethnicGroup || record.ethnicGroup,
                Origin: record.candidateresume?.origin || record.origin,
                HouseholdRegistration: record.candidateresume?.householdRegistration || record.householdRegistration,
                PoliticalAppearance: record.candidateresume?.politicalAppearance || record.politicalAppearance,
                CellPhone: record.candidateresume?.cellPhone || record.cellPhone,
                Mailbox: record.candidateresume?.mailbox || record.mailbox,
                DateOfBirth: record.candidateresume?.dateOfBirth || record.dateOfBirth,
                Age: record.candidateresume?.age || record.age,
                Degree: record.candidateresume?.degree === 1 ? '本科' : (record.candidateresume?.degree === 2 ? '大专' : (record.candidateresume?.degree === 3 ? '硕士' : '其他')),
                School: record.candidateresume?.school || record.school,
                Specialized: record.candidateresume?.specialized || record.specialized,
                GraduationTime: record.candidateresume?.graduationTime || record.graduationTime,
                MarriageAndChildbearing: record.candidateresume?.marriageAndChildbearing || record.marriageAndChildbearing,
                LastWork: record.candidateresume?.lastWork || record.lastWork,
                RecruiterID: record.recruitmentrequirement?.screenpeople || record.candidateresume.screenpeople,
                ResumeStatus: record.candidateresume?.talentStatus || record.candidateresume.resumeStatus,
                Creator: record.creator,
                WarehousingDate: record.warehousingDate,
                // 原始数据保留以供详情使用
                rawData: record
            }
        });

        page.value.records = mappedRecords;
        page.value.total = res.data.total;
        console.log("分页数据", page.value);
        setTimeout(() => {
            loading.value = false
            dialog.value = false
        }, 400)
    })
}

//抽屉提交取消
const cancelForm = () => {
    loading.value = false
    dialog.value = false
}

const reset = () => {  //重置
    Screening.value = '待面试'
    page.value.current = 1
    sortTheNumbers.value = 1
    talentInformationMethod()
}

const talentId = ref()
// 获取当前数据
const handleClick = (row) => {
    console.log(row)
    talentId.value = row.CandidateID
    console.log('当前获取的数据', talentId.value);

    isVisible.value = true
}
</script>

<style scoped>
.talent-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.toolbar-left {
    flex: 1;
}

.toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.search-input {
    width: 250px;
}

.content-wrapper {
    flex: 1;
    overflow: auto;
    margin-bottom: 20px;
}

.table-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.talent-table {
    width: 100%;
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: auto;
    flex-shrink: 0;
}

.link-text {
    color: #409eff;
    cursor: pointer;
}

.link-text:hover {
    color: #66b1ff;
}
</style>